<template>
	<div class="mybook">
		<div class="div1">
			<h3>我的钱包</h3>
		</div>
		<div class="mybook-bottom">
			<ul>
				<li>
					<p>0元</p>
					<label>
						<img src="../../../../public/fun/img-36.png" />
						<span>余额</span>
					</label>
				</li>
				<li>
					<p>7张</p>
					<label>
						<img src="../../../../public/fun/img-37.png" />
						<span>优惠卷</span>
					</label>
				</li>
				<li>
					<p>0个</p>
					<label>
						<img src="../../../../public/fun/img-38.png" />
						<span>游侠币</span>
					</label>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default{
		name:'Mybooks'
	}
</script>

<style scoped>
	.mybook{
		width: 100%;
		height: 3.5rem;
		background-color:gainsboro;
		padding-top: 0.2rem;
	}
	.mybook .mybook-bottom{
		width: 100%;
		height: 2rem;
		background-color: white;
	}
	.mybook .mybook-bottom ul{
		width: 100%;
	}
	.mybook .mybook-bottom ul li{
		text-align: center;
		width: 30%;
		position: relative;
		float: left;
	}
	.mybook .mybook-bottom ul li p{
		font-size: 0.4rem;
		padding-left: 0.7rem;
	}
	.mybook .mybook-bottom ul li label img{
		width: 0.5rem;
		height: 0.5rem;
		margin-top: 0.1rem;
		position: absolute;
		left: 30%;
		top: 0.6rem;
	}
	.mybook .mybook-bottom ul li label span{
		font-size: 0.4rem;
		position: absolute;
		left: 50%;
		top: 0.8rem;
	}
	.mybook .div1{
		width: 100%;
		height: 1.3rem;
		background-color: white;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.mybook  h3{
		font-size: 0.45rem;
		padding: 0 0.3rem;
		font-weight: bold;
	}
	.mybook p{
		padding: 0 0.3rem;
	}
</style>
